import React, { useEffect, useState, useLayoutEffect } from "react";
import Taro, { useRouter, useDidShow, useReady } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtSwipeAction } from "taro-ui";
import "taro-ui/dist/style/components/swipe-action.scss"; // 按需引入
import "./index.scss";

const Index: React.FC<{}> = () => {
  const tabList = ["tab1", "tab2", "tab3", "tab4"];
  const [activeKey, setActiveKey] = useState(tabList[3]);
  const [width, setWidth] = useState(0);
  const [left, setLeft] = useState(0);
  const [isShow, setIsShow] = useState("none");

  const [isOpen, setIsOpen] = useState(false);
  const [touchX, settouchX] = useState();

  // useLayoutEffect(() => {
  //   setIsShow("block");
  // }, []);

  useLayoutEffect(() => {
    Taro.nextTick(() => {
      const query = Taro.createSelectorQuery();
      query.select(".tabs__item__active .text").boundingClientRect();
      query.exec((res) => {
        console.log(res, "res");
        setWidth(res[0].width);
        setIsShow("block");
        setLeft(res[0].left);
      });
    });
  }, [activeKey]);

  // 封装delete

  const onTouchStart = (e) => {};

  return (
    <View className="tar-bar-list-page">
      <View className="tabs-wrapper">
        <View className="tabs">
          {tabList.map((it) => (
            <View
              className={
                it === activeKey
                  ? "tabs__item tabs__item__active"
                  : "tabs__item"
              }
              key={it}
              onClick={() => setActiveKey(it)}
            >
              <View className="text">{it}</View>
            </View>
          ))}
        </View>
        <View
          className="cursor"
          style={`width:${width}px;left:${left}px;display:${isShow};`}
        ></View>
      </View>
      <AtSwipeAction
        options={[
          {
            text: "取消",
            style: {
              backgroundColor: "#FD690A",
            },
          },
          {
            text: "确认",
            style: {
              backgroundColor: "#FF4949",
            },
          },
        ]}
      >
        <View className="normal">AtSwipeAction 一般使用场景</View>
      </AtSwipeAction>

      <View className="content-wrapper">
        <View className="siwper-action-wrapper">
          <View className="siwper-action-wrapper__content">1234231424124</View>
          <View className="siwper-action-wrapper__opt">
            <View className="item">分享</View>
            <View className="item">删除</View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Index;
